<template>
  <div
    class="fixed"
    :style="{
      borderRadius:styles.circle+'px',
      marginTop:styles.marginTop+'px',
       marginBottom:styles.marginBottom+'px',
        marginLeft:styles.marginLR+'px',
         marginRight:styles.marginLR+'px',
         height:styles.isFloat==2 ?430+'px':''
    }"
  >
    <div v-if="styles.orPic==2" class="lunbo">
      <el-carousel height="280px">
        <el-carousel-item v-for="(v,i) in styles.imgUrl" :key="i">
          <el-image v-if="v.img==''" style="width: 100%; height: 280px" fit="cover" :src="img"></el-image>
          <el-image v-else style="width: 100%; height: 280px" fit="cover" :src="v.img"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-show="styles.module==1" class="fixed-one">
      <div class="fixed-bg" :style="{backgroundColor:styles.colorBg,color:styles.colorWord,opacity:styles.percent/100}"></div>
      <el-row
        :style="{color:styles.colorWord}"
        class="content"
        type="flex"
        justify="center"
        align="middle"
      >
        <el-col :span="18">
          <el-row class="hello" type="flex" justify="start" align="middle">
            <span>xxx,下午好</span>
          </el-row>
          <el-row class="addr line-one-p" type="flex" justify="start" align="middle">
            <span>
              <svg class="icon icon-dingwei" aria-hidden="true">
                <use xlink:href="#icondingwei2" />
              </svg>
            </span>
            <span>华中科技大学店</span>
            <span>距您7.0km</span>
            <span>更多门店</span>
            <span>
              <svg :style="{color:styles.colorWord}" class="icon" aria-hidden="true">
                <use xlink:href="#iconarrowBottom-fill" />
              </svg>
            </span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10" class="type" type="flex" justify="end" align="middle">
            <el-col style="text-align:center">
              <el-image style="width: 20px; height: 20px" :src="styles.upLoad1.img==''?nav:styles.upLoad1.img" fit="cover"></el-image>
              <p>{{styles.upLoad1.text}}</p>
            </el-col>
            <el-col style="text-align:center">
              <el-image style="width: 20px; height: 20px" :src="styles.upLoad2.img==''?search:styles.upLoad2.img" fit="cover"></el-image>
              <p>{{styles.upLoad2.text}}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div v-show="styles.module==2" class="fixed-two">
      <div class="fixed-bg" :style="{backgroundColor:styles.colorBg,color:styles.colorWord,opacity:styles.percent/100}"></div>
      <el-row
        :style="{color:styles.colorWord}"
        class="content"
        type="flex"
        justify="center"
        align="middle"
      >
        <el-col :span="18">
          <el-row class="addr-name" type="flex" justify="start" align="middle">
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icondingwei3" />
              </svg>
              武汉未来城店 >
            </span>
          </el-row>
          <el-row class="range" type="flex" justify="start" align="middle">
            <span>距离您 202.8m</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10" class="type" type="flex" justify="end" align="middle">
            <el-col>
              <el-image style="width: 20px; height: 20px" :src="styles.upLoad1.img==''?nav:styles.upLoad1.img" fit="cover"></el-image>
              <p>{{styles.upLoad1.text}}</p>
            </el-col>
            <el-col>
              <el-image style="width: 20px; height: 20px" :src="styles.upLoad2.img==''?search:styles.upLoad2.img" fit="cover"></el-image>
              <p>{{styles.upLoad2.text}}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div v-show="styles.module==3" class="fixed-two fixed-three">
      <div class="fixed-bg" :style="{backgroundColor:styles.colorBg,color:styles.colorWord,opacity:styles.percent/100}"></div>
      <el-row
        :style="{color:styles.colorWord}"
        class="content"
        type="flex"
        justify="center"
        align="middle"
      >
        <el-col :span="18">
          <el-row class="addr-name" type="flex" justify="start" align="middle">
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icondingwei2" />
              </svg>
            </span>
            <span class="line-one">洪山区武珞路( 街道口街道口街道口)</span>
          </el-row>
          <el-row type="flex" justify="start" align="middle">
            <div class="origin">
              <span class="line-one">由 武汉市洪山区未来城店 送出</span>
            </div>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10" class="type" type="flex" justify="end" align="middle">
            <el-col>
              <el-image style="width: 20px; height: 20px" :src="styles.upLoad1.img==''?nav:styles.upLoad1.img" fit="cover"></el-image>
              <p>{{styles.upLoad1.text}}</p>
            </el-col>
            <el-col>
              <el-image style="width: 20px; height: 20px" :src="styles.upLoad2.img==''?search:styles.upLoad2.img" fit="cover"></el-image>
              <p>{{styles.upLoad2.text}}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div v-show="styles.isFloat==2 && styles.orPic==2" :style="{
      color:styles.colorWord,
      boxShadow:'0 0 5px 2px #eee',
      }" class="fixed-four">
      <div class="four-content">
        <div>
          <el-image style="width: 50px; height: 50px" :src="styles.floatUrl1.img==''?nav:styles.floatUrl1.img" fit="cover"></el-image>
          <p>{{styles.floatUrl1.text}}</p>
        </div>
        <div>
          <el-image style="width: 50px; height: 50px" :src="styles.floatUrl2.img==''?search:styles.floatUrl2.img" fit="cover"></el-image>
          <p>{{styles.floatUrl2.text}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value1: 0,
      img: require("../../../assets/img/banner3.png"),
      nav: require("../../../assets/img/nav.png"),
      search: require("../../../assets/img/search.png"),
    };
  },
  props: ["styles"],
};
</script>


<style lang="less" scoped>
@import url("../../../assets/css/base.less");
.fixed {
  position: relative;
  min-height: 70px;
  .fixed-one {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
    > div {
      height: 70px;
      padding: 0 10px;
    }
    .hello {
      > span:nth-of-type(1) {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .addr {
      > span {
        margin-right: 5px;
        font-size: 12px;
      }
      > span:nth-of-type(1) {
        color: #fed853;
        font-size: 14px;
        margin-right: 0;
      }
      > span:nth-of-type(3) {
        opacity: 0.6;
      }
    }
  }
  .fixed-two {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    > div {
      height: 70px;
      padding: 0 10px;
    }
    .addr-name {
      > span {
        font-size: 15px;
        font-weight: bold;
      }
    }
    .range {
      > span {
        font-size: 12px;
        margin-left: 18px;
      }
    }
    .type {
      text-align: center;
      p {
        font-size: 12px;
      }
    }
  }
  .fixed-three {
    z-index: 99;
    > div {
      height: 70px;
      padding: 0 10px;
    }
    .origin {
      background-color: rgba(255, 255 ,255, 0.4);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-radius: 10px;
      margin-left: 10px;
      width: 60%;
      margin-top: 5px;
      > span {
        font-size: 10px;
        padding-left: 5px;
      }
    }
  }
  .fixed-four{
    width: 90%;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 5%;
    top: 240px;
    z-index: 1000;
    .four-content{
      height: 180px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      >div{
        width: 50%;
        text-align: center;
        border-right: 1px solid #eee;
      }
      >div:last-child{
        border-right: 0;
      }
    }
  }
  .fixed-bg{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
}
</style>
